<template>
  <div class="receive_info">
    <el-dialog
      title="收料"
      width="60%"
      :visible.sync="dialogTableVisible"
      v-dialogDrag
      :close-on-click-modal="false"
      customClass="mes_dialog">
      <div class="dialog_header">
        <code-scan
          v-show="tabsValue === 'first'"
          code-placeholder="[要料申请编号]"
          @codeSubmit="handleCodeScan"
          ref="codeScan">
        </code-scan>
      </div>
      <el-tabs v-model="tabsValue" type="border-card" v-loading="isLoading" class="mes_tabs">
        <el-tab-pane label="实物收料" name="first">
          <div class="table_container">
            <el-table
              border
              v-loading="isLoading"
              max-height="440"
              ref="multipleTable"
              :data="entityList"
              @selection-change="handleSelectionChange"
              class="table_dialog">
              <el-table-column
                :class-name="'static_col'"
                type="selection"
                width="40"
                align="center">
              </el-table-column>
              <el-table-column
                :class-name="'static_col'"
                label="物料编码"
                prop="materialNumber"
                min-width="80"
                show-overflow-tooltip
                align="center">
              </el-table-column>
              <el-table-column
                :class-name="'static_col'"
                label="物料名称"
                prop="materialName"
                min-width="80"
                show-overflow-tooltip>
              </el-table-column>
              <el-table-column
                :class-name="'static_col'"
                label="图号"
                prop="drawingNumber"
                min-width="80"
                show-overflow-tooltip
                align="center">
              </el-table-column>
              <el-table-column
                :class-name="'static_col'"
                label="小包批次号"
                prop="parcelBatchNumber"
                min-width="90"
                show-overflow-tooltip
                align="center">
              </el-table-column>
              <el-table-column
                :class-name="'static_col'"
                label="周转码"
                prop="turnoverNumber"
                min-width="90"
                show-overflow-tooltip
                align="center">
              </el-table-column>
              <el-table-column
                :class-name="'static_col'"
                label="采购批次号"
                prop="purchaseBatchNumber"
                min-width="90"
                show-overflow-tooltip
                align="center">
              </el-table-column>
              <el-table-column
                :class-name="'static_col'"
                label="序列号"
                prop="materialSerialNumber"
                min-width="80"
                show-overflow-tooltip
                align="center">
              </el-table-column>
              <el-table-column
                :class-name="'static_col'"
                prop="storeTypeLabel"
                label="入库类型"
                show-overflow-tooltip
                align="center">
              </el-table-column>
              <el-table-column
                :class-name="'static_col'"
                label="发料数量"
                prop="sendQuantity"
                width="80"
                show-overflow-tooltip
                align="center">
              </el-table-column>
              <el-table-column
                align="center"
                label="收料数量"
                :class-name="'cell_padding'">
                <template slot-scope="scope">
                  <!--<el-input-number-->
                  <!--v-positive-int="{'max': scope.row.sendQuantity}"-->
                  <!--v-model="scope.row.acceptQuantity"-->
                  <!--:controls="false"-->
                  <!--:max="scope.row.sendQuantity">-->
                  <!--</el-input-number>-->
                  <input type="text" v-model="scope.row.acceptQuantity" class="receive_number">
                </template>
              </el-table-column>
              <el-table-column
                :class-name="'static_col'"
                label="单位"
                prop="unit"
                width="50"
                show-overflow-tooltip
                align="center">
              </el-table-column>
              <el-table-column
                :class-name="'static_col'"
                label="备注"
                :resizable="false"
                prop="remarks"
                min-width="80"
                show-overflow-tooltip>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
        <el-tab-pane label="虚拟收料" name="second">
          <div class="table_container">
            <el-table
              border
              v-loading="isLoading"
              max-height="440"
              :data="VirtualList"
              class="table_dialog">
              <el-table-column
                label="物料编码"
                prop="materialNumber"
                min-width="100"
                show-overflow-tooltip
                align="center">
              </el-table-column>
              <el-table-column
                label="物料名称"
                prop="materialName"
                min-width="100"
                show-overflow-tooltip>
              </el-table-column>
              <el-table-column
                label="图号"
                prop="drawingNumber"
                min-width="100"
                show-overflow-tooltip
                align="center">
              </el-table-column>
              <el-table-column
                prop="storeTypeLabel"
                label="入库类型"
                show-overflow-tooltip
                align="center">
              </el-table-column>
              <el-table-column
                label="要料数量"
                prop="requestQuantity"
                min-width="80"
                show-overflow-tooltip
                align="center">
              </el-table-column>
              <el-table-column
                label="单位"
                prop="unit"
                min-width="80"
                show-overflow-tooltip
                align="center">
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
      </el-tabs>
      <span slot="footer" class="dialog-footer mes_btn">
          <el-button type="primary" @click="saveData">
            提交
          </el-button>
          <el-button @click="dialogTableVisible = false">
            取消
          </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'ReceiveInfo',
  data() {
    return {
      dialogTableVisible: false, // 加载中
      isLoading: false, // 数据加载
      tabsValue: 'first', // tabs组件的value值
      listId: '', // 列表数据id
      acceptQuantity: '', // 收料数量
      selectData: [], // 选中的数据
    }
  },
  computed: {
    // 获取收料数据
    deliveryDetail() {
      return this.$store.state.materialReceive.receiveData
    },
    // 实物收料
    entityList() {
      console.log(this.deliveryDetail.sendInventories)
      return this.deliveryDetail.sendInventories || []
    },
    // 虚拟收料
    VirtualList() {
      return this.deliveryDetail.requestInventories || []
    },
  },
  methods: {
    // 打开弹框
    openDialog(id) {
      if (!id) return
      this.listId = id
      this.isLoading = true
      this.dialogTableVisible = true
      this.getMaterialDetail(id)
    },
    // 获取实物入库数据
    getMaterialDetail(id) {
      let postData = {
        method: 'post',
        url: 'a/materialsendinventory/materialSendInventory/findSendInventory',
        data: {
          requestId: id
        },
        module: 'materialReceive',
        state: 'receiveData'
      }
      this.$store.dispatch('saveData', postData).finally(() => {
        this.isLoading = false
      })
    },
    // 复选框选中
    handleSelectionChange(row) {
      this.selectData = row
      this.entityList.map((val, index) => {
        console.log(val, index)
        this.$set(this.entityList[index], 'acceptQuantity', null)
      })
      row.map((val, index) => {
        if (!val.acceptQuantity) {
          this.$set(row[index], 'acceptQuantity', val.sendQuantity)
        } else {
          this.$set(row[index], 'acceptQuantity', null)
        }
      })
      // 选中的数据放在列表最前面
      // const list = this.deliveryDetail.list
      // list.map((v, i) => {
      //   row.map((val, idx) => {
      //     if (v.id === val.id) {
      //       list.splice(i, 1)
      //       list.unshift(val)
      //     }
      //   })
      // })
    },
    // 扫码
    handleCodeScan(value) {
      if (value) {
        let item = this.entityList.find((item) => item.materialNumber === value)
        if (item) {
          this.setTableSelect(this.entityList, item)
        }
      }
    },
    /**
     * 设置列表勾选
     * @param list 调度列表数据
     * @param item 所勾选的调度数据
     */
    setTableSelect(list, item) {
      if (!this.selectData.some((value) => value.id === item.id)) {
        this.selectData.push(item)
      }
      if (list.some((value) => value.id === item.id)) {
        this.$refs.multipleTable.toggleRowSelection(item, true)
      }
      this.handleSelectionChange(this.selectData)
    },
    // 提交
    saveData() {
      let bool = false
      let doubleBool = true
      this.entityList.map((item) => {
        if (item.acceptQuantity) {
          let receiveNumber = item.acceptQuantity
          // return item.acceptQuantity
          if (!receiveNumber) {
            return this.$message({
              type: 'error',
              message: '收料数量不能为空',
              duration: 1500,
              center: true
            })
          }
          if (receiveNumber) {
            let flag = Number.isInteger(Number(receiveNumber)) && Number(receiveNumber) >= 0
            if (!flag) {
              doubleBool = false
              return this.$message({
                type: 'error',
                message: '收料数量只能是自然数',
                duration: 1500,
                center: true
              })
            }
          }
          bool = true
        }
      })
      if (!bool || !doubleBool) {
        return
      }
      let postData = {
        method: 'post',
        url: 'a/turnoverbatch/turnoverBatch/materialreceive',
        data: {
          materialReqId: this.listId,
          materialSendInventoryList: this.entityList
        },
        noCommit: true
      }
      this.$store.dispatch('saveData', postData).then(() => {
        this.$emit('submitSuccess')
        this.$message({
          type: 'sucess',
          message: '提交成功',
          duration: 1500,
          center: true
        })
        this.dialogTableVisible = false
      })
    }
  }
}
</script>

<style scoped lang="less">
  .receive_info {
    .table_container {
      padding-top: 20px !important;
    }

    .cell {
      box-sizing: border-box;

      .receive_number {
        font-family: 'Microsoft YaHei';
        color: #00b4ff;
        font-weight: 900;
        font-size: 14px;
        max-width: 97%;
        height: 90%;
        text-align: center;
        border: none;
      }
    }

    .dialog_header {
      position: absolute;
      right: 20px;
      top: 20%;
      z-index: 1;
    }
  }
</style>
